<style lang="less">
@import '../../../styles/common.less';
</style>

<template>
    <Card style="height:800px">
        <Card>
            <header>
                <span>姓名:</span>
                <Input v-model="withholeCondition.custName" placeholder="姓名" style="width: 150px" />
                 <span style="width: 200px;margin-left: 20px;" >身份证:</span>
                <Input v-model="withholeCondition.custCardNo" placeholder="身份证" style="width: 150px" />
                 <span style="width: 200px;margin-left: 20px;" >贷款编号:</span>
                <Input v-model="withholeCondition.loanId" placeholder="贷款编号" style="width: 150px" />
                <Button type="primary" @click="listQuery" style="margin-left: 20px;">查询</Button>
            </header>
        </Card>
        <Card>
            <Table border :columns="columns" :data="columnDatas" style="width: 100%;"></Table>
            <div style="margin-top: 100px;text-align: center;">
                <Page :total="withholeCondition.total" :current="withholeCondition.pageNum" :page-size="withholeCondition.pageSize" size="small" show-elevator show-sizer show-total @on-change="pageChange" @on-page-size-change="sizeChange"></Page>
            </div>
        </Card>
    </Card>

</template>

<script>

export default {

  data () {
    return {
      withholeCondition: {
        loanId: '',
        custName: '',
        custCardNo: '',
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      optionData: {
        loanId: ''
      },
      columns: [
        {
          title: '期数',
          key: 'tenor',
          align: 'center',
          width: 65,
          className: 'tbake'
        },
        {
          title: '客户姓名',
          key: 'custName',
          align: 'center',
          width: 70,
          className: 'tbake'
        },
        {
          title: '证件号码',
          key: 'custCardNo',
          align: 'center',
          width: 160,
          className: 'tbake'
        },
        {
          title: '未还本金',
          key: 'principalOs',
          align: 'center',
          width: 90,
          className: 'tbake'
        },
        {
          title: '未还利息',
          key: 'interestOs',
          align: 'center',
          width: 90,
          className: 'tbake'
        },
        {
          title: '未还管理费',
          key: 'managementFeeOs',
          align: 'center',
          width: 90,
          className: 'tbake'
        },
        {
          title: '未还违约金',
          key: 'penaltyFeeOs',
          align: 'center',
          width: 90,
          className: 'tbake'
        },
        {
          title: '未还罚息',
          key: 'lateFeeOs',
          align: 'center',
          width: 90,
          className: 'tbake'
        },
        {
          title: '逾期天数',
          key: 'delqDays',
          align: 'center',
          width: 90,
          className: 'tbake'
        },
        {
          title: '状态',
          key: 'status',
          align: 'center',
          width: 90,
          className: 'tbake',
          render: (h, params) => {
            if (params.row.status === '0') {
              return h('span', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '正常')
            }
            if (params.row.status === '1') {
              return h('span', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '逾期')
            }
            if (params.row.status === '3') {
              return h('span', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '结清')
            }
            if (params.row.status === '3') {
              return h('span', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '提前结清')
            }

            if (params.row.status === '10') {
              return h('span', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '核销')
            }
          }
        },
        {
          title: '申请代扣还款金额',
          key: 'applyAmount',
          align: 'center',
          width: 110,
          className: 'tbake'
        },
        {
          title: '应还款总额',
          key: 'paymentTotal',
          align: 'center',
          width: 90,
          className: 'tbake'
        },
        {
          title: '申请提交时间',
          key: 'applyTime',
          align: 'center',
          width: 100,
          className: 'tbake',
          render: (h, params) => {
            var vm = this
            return h('div', [
              h('span', vm.$util.loanModularFormatTime(params.row.applyTime))
            ])
          }
        },
        {
          title: '申请人',
          key: 'applyUser',
          align: 'center',
          width: 90,
          className: 'tbake'
        },
        {
          title: '费用汇总',
          key: 'feeTotal',
          align: 'center',
          width: 90,
          className: 'tbake'
        },
        {
          title: '操作',
          key: 'operation',
          align: 'center',

          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '10px'
                },
                on: {
                  click: () => {
                    this.$Modal.confirm({

                      title: '手工代扣审核',

                      content: '确定通过吗?',

                      okText: '确定',

                      cancelText: '取消',
                      onOk: () => {
                        var vm = this
                        vm.optionData.loanId = params.row.loanId
                        this.$ajax.post(this.$appContext.marvels_core_financial + 'financial/loan/handleWithhold/service/handleWithholeReviewAdopt', this.optionData).then(re => {
                          var data = re.data
                          var message = data.message
                          this.$Message.warning(message)
                          vm.listQuery()
                        }).catch(er => {

                        })
                      }
                    })
                  }
                }
              }, '通过'),
              h('Button', {
                props: {
                  type: 'error',
                  size: 'small'
                },
                on: {
                  click: () => {
                    this.$Modal.confirm({

                      title: '手工代扣审核',

                      content: '确定拒绝吗?',

                      okText: '确定',

                      cancelText: '取消',
                      onOk: () => {
                        var vm = this
                        vm.optionData.loanId = params.row.loanId
                        this.$ajax.post(this.$appContext.marvels_core_financial + 'financial/loan/handleWithhold/service/handleWithholeReviewRefuse', this.optionData).then(re => {
                          var data = re.data
                          var message = data.message
                          this.$Message.warning(message)
                          vm.listQuery()
                        }).catch(er => {

                        })
                      }
                    })
                  }
                }
              }, '拒绝')
            ])
          }
        }
      ],
      columnDatas: []
    }
  },

  computed: {
    avatorImage () {
      return localStorage.avatorImgPath
    }
  },

  created () {
    // 初始化当前页面请求对象实例
    this.$ajax = this.$util.ajax()
  },

  methods: {
    pageChange: function (pageNum) {
      var vm = this
      vm.withholeCondition.pageNum = pageNum
      vm.listQuery()
    },
    sizeChange: function (pageLength) {
      var vm = this
      vm.withholeCondition.pageSize = pageLength
      vm.listQuery()
    },
    listQuery () {
      var vm = this
      this.$ajax.post(this.$appContext.marvels_core_financial + 'financial/loan/handleWithhold/service/handleWithholeReviewList', this.withholeCondition).then(re => {
        var data = re.data
        vm.columnDatas = data.data.list
        vm.withholeCondition.total = data.data.total
      }).catch(er => {

      })
    }
  }

}
</script>

<style>
.tbake .ivu-table-cell{
  padding-left: 2px;
  padding-right: 2px;
}
.withhold-payment-review-top-div {
  margin-top: 40px;
}

.withhold-payment-review-left-div {
  width: 150px;
  float: left;
  margin-left: 13px;
}

.withhold-payment-review-i-icon {
  float: left;
  margin-left: 20px;
}

.withhold-payment-review-font-div {
  float: left;
  margin-left: -88px;
  text-align: center;
}
.withhold-payment-review-popup-div {
  margin: 18px;
  width: 300px;
  margin-left: 27%;
  margin-top: 31px;
}
.withhold-payment-review-font-div {
  float: left;
  margin-left: -88px;
  text-align: center;
}
</style>
